<template>
    <d2-container class="warning-header">

        <el-card>
            <el-row :gutter="20">
                <el-form :inline="true" :model="key" class="demo-form-inline">

                    <el-form-item label="项目名称">
                        <el-input v-model="key.projectName" style="width:140px"></el-input>
                    </el-form-item>

                    <el-form-item label="设备名称">
                        <el-input v-model="key.deviceName" style="width:140px"></el-input>
                    </el-form-item>

                    <el-form-item label="设备编号">
                        <el-input v-model="key.deviceNo" style="width:140px"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button icon="el-icon-search" size="mini" round @click="onSearch()" type="primary">搜索
                        </el-button>
                        <el-button icon="el-icon-search" size="mini" round @click="onUpgradeBatch()" type="primary">批量升级
                            </el-button>
                    </el-form-item>
                </el-form>
            </el-row>

        </el-card>
        <br/>

        <div>
            <el-card>
                <el-table
                        :data="tableData.data"
                        :stripe="true"
                        :border="true"
                        tooltip-effect="dark"
                        @selection-change="onCheckbox">
                    <el-table-column
                        type="selection"
                        width="55" 
                        :selectable="isCanSel">
                    </el-table-column>
                    <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
                    <el-table-column prop="projectName" label="项目名称" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceNo" label="设备编号" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceName" label="设备名称" align="center">
                    </el-table-column>
                    <el-table-column label="在线状态" align="center" prop="online" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.online==1" class="online online-1"><em></em>在线</span>
                            <span v-if="scope.row.online==0" class="online online-0"><em></em>离线</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="lastUpdate" label="上次升级时间" align="center">
                    </el-table-column>
                    <el-table-column prop="dspVersion" label="版本号" align="center">
                    </el-table-column>
                    <el-table-column prop="servicestatus" label="当前升级状态" align="center">
                        <template slot-scope="scope">
                            <!--
                            <span class="online" v-bind:class="scope.row.servicestatus==1?'online-1':'online-0'" ><em></em>{{upgradeStatusNames[scope.row.servicestatus]}}</span>
                            -->
                            <span v-if="scope.row.servicestatus==0" class="online online-0"><em></em>{{upgradeStatusNames[scope.row.servicestatus]}}</span>
                            <span v-if="scope.row.servicestatus==1 || scope.row.servicestatus==2" class="online online-1"><em></em>{{upgradeStatusNames[scope.row.servicestatus]}}</span>
                            <span v-if="scope.row.servicestatus>2" class="online online-3"><em></em>{{upgradeStatusNames[scope.row.servicestatus]}}</span>

                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="100px" fixed="right" align="center">
                        <template slot-scope="scope">
                            
                            <el-button :disabled="scope.row.online==0 ||scope.row.servicestatus==1 "
                                      @click="onUpgrade(scope.$index,scope.row)" size="mini" round
                                       icon="el-icon-sort" align="center">升级
                            </el-button>
                            
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
        <!--分页操作 -->

        <template slot="footer">
            <div class="block">
                <el-pagination
                        @size-change="onSizeChange"
                        @current-change="onPageChange"
                        :current-page.sync="currentPage"

                        layout="prev, pager, next, jumper"
                        :total="tableData.total">
                </el-pagination>
            </div>
        </template>

        <!--弹窗-->
        <el-dialog
                title="设备升级"
                :visible.sync="editFormVisible"
                width="50%"
                >
            <el-card>
                <el-row>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="选择升级文件：">
                            <el-radio-group v-model="upgradeData.fileName">
                                <el-radio v-for="item in files" :label="item.remotefile" :key="item.remotefile">{{item.name}}</el-radio>
                              </el-radio-group>
                              <el-button size="mini" round style="margin-left: 50px;" @click="uploadFormVisible = !uploadFormVisible">上传文件</el-button>
                        </el-form-item>
                    </el-form>
                    <el-form :inline="true" class="demo-form-inline" v-show="uploadFormVisible">
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            :http-request="uploadPost"
                            :auto-upload="false"
                            :limit="2"
                            :before-upload="beforeUpload">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="onUpload">上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">不超过500kb</div>
                        </el-upload>
                    </el-form>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="强制设置：">
                            <el-checkbox v-model="upgradeData.isReset">强制重新升级</el-checkbox>
                            <el-checkbox v-model="upgradeData.isCloseLast">关闭上次升级</el-checkbox>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" round style="margin-left: 50px;" @click="onUpgradeSubmit">开始升级</el-button>
                        </el-form-item>
                    </el-form>

                </el-row>
            </el-card>

        </el-dialog>

        
    </d2-container>
</template>
<script>

    import {
        getCollectorList,
        uploadFile,
        getUpgradeFiles,
        upgradeSubmit} from "../../api/data/device";

    export default {
        data() {
            return {
                dialogVisible: false,
                currentPage: 1,
                key: {
                    deviceName: '',
                    projectName: '',
                    deviceNo:''

                },
                
                tableData: [],
                editFormVisible: false,
                upgradeStatusNames: ['未升级', '升级中', '升级结束', '升级失败', '超时等待', '用户取消'],
                invUpgard:null, //升级实时定时器
                upgradeData:{
                    fileName:'',
                    isReset:false,
                    isCloseLast:false,
                    selArr:[]
                },
                files:['ssss','sssgg'],
                uploadFormVisible:false,
                uploadCurrfile:null,


            }
        },
        methods: {
            loadTable(data = {}, pageno) {
                if(this.key.deviceName!=''){data.deviceName=this.key.deviceName;}
                if(this.key.deviceNo!=''){data.deviceNo=this.key.deviceNo;}
                if(this.key.projectName!=''){data.projectName=this.key.projectName;}

                getCollectorList( pageno,10,data).then(res => {
                    
                    this.tableData = res;
                    //this.tableData.data[0].servicestatus=1;
                    //this.tableData.data[1].online=1;
                })

            },

            loadfiles(){
                getUpgradeFiles().then(res=>{
                    this.files = res.data;
                });
            },

            onUpgrade(index,row){
                this.editFormVisible = true;
            },

            onUpgradeBatch(){
                if(this.upgradeData.selArr.length==0){
                    this.$message({
                        message: '请选择要升级的设备！',
                        type: 'error'
                    });
                    return;
                }
                this.editFormVisible = true;
            },

            onUpgradeSubmit(){
                let rtusn = this.upgradeData.selArr.map(v => v.deviceNo).join();
                //alert(rtusn);
                upgradeSubmit(
                    rtusn,
                    this.upgradeData.fileName,
                    this.upgradeData.isReset,
                    this.upgradeData.isCloseLast
                ).then(res=>{

                });
            },
            
            onSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            onPageChange(val) {
                console.log(`当前页: ${val}`);
                this.loadTable({},val);
            },
            onCheckbox(val){
                this.upgradeData.selArr = val;
            },
            onUpload(){
                //alert('$refs.upload');
                this.$refs.upload.submit();
            },
            isCanSel(row,index){
                if(row.online==0 || 
                    row.servicestatus==1){
                    return false;
                }
                return true;
            },
            beforeUpload(file){
                this.uploadCurrfile = file;
            },
            uploadPost(){
                uploadFile(this.uploadCurrfile).then(()=>{

                    alert(1);
                });
            },
            onSearch(){
                this.loadTable({},1);
            }



        },
        mounted() {
            this.loadTable({}, 1);
            this.loadfiles();
/*
            this.invUpgard = setInterval(()=>{
                this.loadTable({},this.currentPage);
            },1000);*/


        },

        destroyed(){
            if(this.invUpgard){
                clearInterval(this.invUpgard);
            }
            
        }
    }
</script>
<style>
    .warning-header .d2-container-full__header {
        background: gainsboro !important;
    }

    .warning-header .d2-container-full__header {
        background: #1E9FFF !important;

    }

    .el-form-item__content {
        text-align: center;
    }

    .el-button {
        padding: 10px 30px;
        margin-right: 20px;
    }

    .el-form-item__label {
        margin-left: 5px;
    }

    .number1 {
        padding-left: 0px;
    }

    .online em{
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
       
    }

    .online-1 {
        color: green;
        
    }

    .online-1 em{
        background: green;
    }

    .online-0 {
        color:#cccccc;
        
    }

    .online-0 em{
        background: #cccccc;
    }

    .online-3 {
        color:#a3880f;
        
    }

    .online-3 em{
        background: #a3880f;
    }




</style>

